<script setup>
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import useTable from "@/utils/useTable";
import {http} from "@/api";
import { Plus } from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const routeList = ref([
  {
    name: '温度数据',
    code: 'temperature-data',
    unit: '℃'
  },
  {
    name: '气压数据',
    code: 'pressure-data',
    unit: 'Pa'
  },
  {
    name: '湿度数据',
    code: 'humidity-data',
    unit: '%'
  },
  {
    name: '辐照度数据',
    code: 'radiation-data',
    unit: 'W/m²'
  },
  {
    name: '总光伏功率数据',
    code: 'total-photovoltaic-power-data',
    unit: 'MV'
  },
  {
    name: '储能无功数据',
    code: 'storage-reactive-power-data',
    unit: 'MVAr'
  },
  {
    name: '储能有功数据',
    code: 'storage-active-power-data',
    unit: 'MW'
  },
  {
    name: '可充电量数据',
    code: 'rechargeable-amount-data',
    unit: 'kWh'
  },
  {
    name: '可放电量数据',
    code: 'dischargeable-amount-data',
    unit: 'kWh'
  },
  {
    name: '电池荷电量数据',
    code: 'battery-charge-amount-data',
    unit: 'kWh'
  }
])
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openDelete
} = useTable({
  requestFn: http.dataQuery,
  params: {
    type: 'temperature-data',
  }
})
const dialogVisible = ref(false)
const formRef4 = ref(null)
const formData4 = ref({
  id: undefined,
  name: '',
  value: ''
})
const rules4 = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
  value: [
    { required: true, message: '请输入', trigger: 'blur' }
  ],
})
const openAdd = () => {
  formData4.value = {
    id: undefined,
    name: '',
    value: '',
    type: searchParams.value.type
  }
  dialogVisible.value = true
}
const openEdit = (row) => {
  formData4.value = {
    id: row.id,
    name: row.name,
    value: row.value,
    type: row.type
  }
  dialogVisible.value = true
}

const submit4 = () => {
  formRef4.value.validate((valid) => {
    if (valid) {
      console.log('submit!')
      if (formData4.value.id) {
        http.dataQuery.update(formData4.value).then(res => {
          ElMessage.success(res.msg)
          dialogVisible.value = false
          search()
        })
      } else {
        http.dataQuery.create(formData4.value).then(res => {
          ElMessage.success(res.msg)
          dialogVisible.value = false
          search()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
const reset4 = () => {
  dialogVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="新增/编辑" width="500px">
    <el-form ref="formRef4" :model="formData4" :rules="rules4" label-width="120px" label-position="top">
      <el-form-item label="模块">
        <el-select style="width: 260px"  v-model="formData4.type">
          <el-option
              v-for="item in routeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="name">
        <el-date-picker
            v-model="formData4.name"
            type="datetime"
            placeholder="选择时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="值" prop="value">
        <el-input v-model="formData4.value" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset4">取消</el-button>
        <el-button type="primary" @click="submit4">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <PageMain title="数据维护">
    <el-form label-suffix="：" inline>
      <el-form-item label="模块">
        <el-select style="width: 260px" t v-model="searchParams.type">
          <el-option
              v-for="item in routeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="时间" prop="name">
        </el-table-column>
        <el-table-column label="值" prop="value">
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
          <template #default="scope" >
            <el-button type="text"  @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="openDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>

</template>

<style scoped lang="scss">

</style>